﻿@page "/components/grid"

<DocsPage>
    <DocsPageHeader Title="Grid" Component="@nameof(MudGrid)">
        <Description>
            MudBlazor comes with a 12-point grid system and contains 6 breakpoints that are used for specific screen sizes.<br /><br />
            Read more about <MudLink Href="/features/breakpoints">MudBlazor's breakpoints here.</MudLink>
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Spacing">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Class="demo-grid-spacing" Code="@nameof(GridSpacingExample)" ShowCode="false">
                <GridSpacingExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Basic Grid">
                <Description>The column widths apply at all breakpoints, xs and up.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Class="demo-grid-basic" Code="@nameof(GridBasicExample)" ShowCode="false">
                <GridBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Grid With Breakpoints">
                <Description>You can apply multiple column widths, causing the layout to change at the specific break point.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Class="demo-grid-basic" Code="@nameof(GridWithBreakpointsExample)" ShowCode="false">
                <GridWithBreakpointsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Line Break">
                <Description>You can force items onto the next line by adding a <CodeInline>MudFlexBreak</CodeInline>.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Class="demo-grid-basic" Code="@nameof(GridLineBreakExample)" ShowCode="false">
                <GridLineBreakExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Grid Builder">
                <Description>Calculate your breakpoints with this tool. Move the slider to add and remove items.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Class="demo-grid-basic" Code="@nameof(GridBuilderExample)" ShowCode="false">
                <GridBuilderExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
